<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>04-图片翻转</title>
<style>
   *{
       box-sizing: border-box;
   } 
   ul,li,h2{
       margin: 0;
       padding: 0;
       list-style: none;
   }
   .brand{
       width: 312px;
       margin: 0 auto;
       border: 1px solid #ccc;
       box-shadow: 0 0 5px #ddd;
   }
   .brand h2{
       height: 40px;
       line-height: 40px;
       text-align: center;
       font-size: 16px;
       color: #333;
       border-bottom: 2px solid #333;
   }
   .brand ul{
       padding: 0 15px 10px 15px;
       overflow: hidden;
   }
   .brand ul li{
       float: left;
       width: 120px;
       height: 75px;
       margin: 10px 10px 0px 10px;
       position: relative;
    }
    .brand li img{
        width: 120px;
        height: 75px;
        border: 1px solid #ccc;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .brand li span{
        position: absolute;
        top: 37px;
        left: 0;
        width: 120px;
        height: 0px;
        border: 1px solid #ccc;
        background-color: #fa3;
        text-align:center;
        line-height: 75px;
        font-size: 16px;
        color: white;
        display: none;
        z-index: 1;
    }
</style>
</head>
<body>
   <div class="brand">
       <h2>热门品牌推荐</h2>
       <ul>
         <!--(li>a[href=#]>img[src=images/$@1$@1.jpg]+span{肌龄})*8-->
         <li><a href="#"><img src="images/11.jpg" alt=""><span>肌龄</span></a></li>
         <li><a href="#"><img src="images/22.jpg" alt=""><span>肌龄</span></a></li>
         <li><a href="#"><img src="images/33.jpg" alt=""><span>肌龄</span></a></li>
         <li><a href="#"><img src="images/44.jpg" alt=""><span>肌龄</span></a></li>
         <li><a href="#"><img src="images/55.jpg" alt=""><span>肌龄</span></a></li>
         <li><a href="#"><img src="images/66.jpg" alt=""><span>肌龄</span></a></li>
         <li><a href="#"><img src="images/77.jpg" alt=""><span>肌龄</span></a></li>
         <li><a href="#"><img src="images/88.jpg" alt=""><span>肌龄</span></a></li> 
       </ul>  
   </div> 
</body>
<html>
<script>
    $(function(){
        var aLi = $('.brand li');
        var aImg = $('.brand li img');
        var aSpan = $('.brand li span');
        aLi.each(function(index){
              $(this).mouseover(function(){
                  
              //鼠标高度变为0,当图片高度变为0之后,紧接着让文字显示    
              aImg.eq(index).css('z-index','1').animate({
                    height:0,
                    top:37,
              },80,function(){
                  //图片隐藏   
                  $(this).hide();  
                //动画结束,让文字显示
                aSpan.eq(index).show().css('z-index',2).animate({
                    height:75,
                    top:0,
                },80);
              });
            });

            $(this).mouseout(function(){
                 aImg.eq(index).stop();
                 aSpan.eq(index).stop();
                //鼠标出去,文字高度改为0,紧接着显示图片
                aSpan.eq(index).css('z-index',1).animate({
                    height:0,
                    top:37
                },80,function(){
                    //显示图片
                    $(this).hide(); 
                  aImg.eq(index).show().css('z-index',2).animate({
                      height:75,
                      top:0
                  },80)
                })  
            });
        });
    });
</script>